<template>
  <div class="box">
    <header class="header top">
      <van-nav-bar
      @click-left="$router.push('/kind')"
      @click-right="onRight"
      :style="flag ? 'background-color:red' : ''"
      >
        <template #left>
          <van-icon name="wap-nav" size="24" />
        </template>
        <template #right>
          <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" color="#07c160" size="24" v-if="sl" />
          <span v-else>登录</span>
        </template>
        <template #title>
          <van-button round type="default" @click="$router.push('/search')">
              <van-icon name="search" size="24" />
            请输入要搜索的商品</van-button>
        </template>
      </van-nav-bar>
      <em class="logo iconfont icon-lei"></em>
    </header>
    <div class="content  home" ref="cont">
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, idx) in bannerList" :key="idx">
            <van-image width="100%" height="100%" fit="cover" :src="item" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="hotbuy">
        <div class="hot-l">
          <van-image class="hotlImg" width="80" height="80" src="https://m.360buyimg.com/n1/jfs/t1/133901/26/14698/161323/5fa36530E529b25fb/2cddb19424ffe087.jpg!q70.jpg" />
        </div>
        <div class="hot-c"></div>
        <div class="hot-r">
          <van-image class="hotrImg" width="80" height="80" src="https://m.360buyimg.com/n1/jfs/t1/99820/25/17479/172234/5e86f1c7E3c9c8eaf/c87b8cc65bad7c43.jpg!q70.jpg" />
        </div>
      </div>
      <div class="nav">
        <van-grid :column-num="4">
          <van-grid-item v-for="val in navList" :key="val.text" :icon="val.icon" :text="val.text" />
        </van-grid>
      </div>
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-card
            v-for="item in proList"
            :key="item.proId"
            :num="item.stock"
            :price="item.price"
            :desc="item.introduce"
            :title="item.proName"
            :thumb="item.proImg"
            @click="fn(item.proId)"
          />
        </van-list>
      </van-pull-refresh>
      <van-icon name="back-top" class="toTop" v-show="flag" @click="gotoTop" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Image as VanImage, Grid, GridItem, Card, List, PullRefresh, Icon, NavBar, Button } from 'vant'
import { getNav, getPro } from '../../api/index'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Card)
Vue.use(List)
Vue.use(PullRefresh)
Vue.use(Icon)
Vue.use(NavBar)
Vue.use(Button)

export default {
  data () {
    return {
      bannerList: [
        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/136301/1/14125/132532/5f9bea99E3597a505/c0bac25f132f2b8c.jpg!q70.jpg.dpg',
        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/114550/12/7437/102254/5ec3971fE78db18f4/438d4775f9d653ee.jpg!q70.jpg.dpg',
        'https://imgcps.jd.com/ling4/100008348530/5aW96LSn5bCx6KaB5aSf5Ye66Imy/5a6e5oOg5omL5py6562J5L2g/p-5c11d16482acdd181dbc1fd3/325c163d/cr_1125x445_0_171/s1125x690/q70.jpg',
        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/149210/29/12780/221305/5f9d0df2E55e71b2d/6d4a05a94e18dec8.jpg!q70.jpg.dpg',
        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/139930/1/12480/119761/5f9a6626E365262a1/dd30cb181df3c263.jpg!q70.jpg.dpg',
        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/135802/11/14085/61297/5f9a5901E88e26971/bae26f7965c32486.jpg!q70.jpg.dpg',
        'https://imgcps.jd.com/ling4/10023291400258/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5c131e9282acdd181da661a5/54570306/cr_1125x445_0_171/s1125x690/q70.jpg',
        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/134783/17/14304/146595/5f9c408fEef3c2d3a/57e3fd78de352919.jpg!q70.jpg.dpg'
      ],
      navList: [],
      iconArr: [
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/143365/25/1824/3716/5efbf3c0E5175e1fb/88f6227257a29f1d.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png.webp'
      ],
      proList: [],
      loading: false,
      finished: false,
      i: 0,
      isLoading: true,
      flag: false,
      sl: false
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      getPro({ index: this.i++, num: 10 }).then(res => {
        this.proList = this.proList.concat(res.data.data)
        // this.proList = [...this.proList, ...res.data.msg]
        this.loading = false
        if (res.data.data.length < 1) {
          this.finished = true
        }
      })
    },
    onRefresh () {
      this.i = 0
      getPro({ index: 0, num: 10 }).then(res => {
        this.proList = res.data.data
        this.isLoading = false
      })
    },
    gotoTop () {
      this.$refs.cont.scrollTop = 0
    },
    fn (proId) {
      this.$router.push('/detail/' + proId)
    },
    onRight () {
      console.log(localStorage.getItem('isLogin'))
      if (localStorage.getItem('isLogin') === 'ok') {
        this.$router.push('/my')
      } else {
        this.$router.push('/login')
      }
    }
  },
  created () {
    getNav().then(res => {
      const arr = res.data.data
      arr.length = 8
      arr.forEach((val, idx) => {
        this.navList.push({
          icon: this.iconArr[idx],
          text: val
        })
      })
    })
  },
  mounted () {
    const that = this
    this.$refs.cont.addEventListener('scroll', function () {
      if (that.$refs.cont.scrollTop > 60) {
        that.flag = true
      } else {
        that.flag = false
      }
    })
    if (localStorage.getItem('isLogin') === 'ok') {
      this.sl = true
    } else {
      this.sl = false
    }
  }
}
</script>

<style lang="scss">
.home {
  background-color: #f9eef5;
  .banner {
    padding: .1rem .15rem;
    background: url('https://m.360buyimg.com/mobilecms/s1125x939_jfs/t1/154681/34/4662/100261/5fa25e06E0c10a87b/5614f987a448bac3.jpg') no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    .my-swipe {
      border-radius: .1rem;
      .van-swipe-item {
      height: 1.5rem;
      }
    }
  }
  .hotbuy {
    display: flex;
    height: 1.12rem;
    padding: 0;
    margin: 0;
    .hot-l {
      position: relative;
      .hotlImg {
        position: absolute;
        right: .1rem;
        top: .1rem;
        border-radius: .1rem;
        overflow: hidden;
      }
    }
    .hot-r {
      // position: absolute;
      .hotrImg {
        position: relative;
        top: .08rem;
        left: .08rem;
        border-radius: .1rem;
        overflow: hidden;
      }
    }
    .hot-l {
      flex: 1;
      background-image: url('https://m.360buyimg.com/mobilecms/s270x345_jfs/t1/148012/6/13095/61826/5fa260beE874c0423/a19407cfc1261444.png!q70.jpg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
    }
    .hot-c {
      flex: 2;
      background-image: url('https://m.360buyimg.com/mobilecms/jfs/t1/123959/9/17339/170167/5fa260d6E84d5159f/48cdaa9aabd7b21f.gif');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 102%;
    }
    .hot-r {
      flex: 1;
      background-image: url('https://m.360buyimg.com/mobilecms/s270x345_jfs/t1/142819/12/13204/58281/5fa260efE620184fb/2569d171d566ece3.png!q70.jpg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
    }
  }
  .nav {
    padding: 0 .2rem;
    background-image: url('https://m.360buyimg.com/mobilecms/s750x324_jfs/t1/120141/30/17086/12767/5f9fd00fE62d3ff5e/3c71e4a656441d87.jpg.dpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    .van-grid .van-hairline--top {
      .van-grid-item {
        .van-grid-item__content {
          padding: .1rem .08rem;
        }
      }
    }
  }
  .toTop{
    position: fixed;
    bottom: 1rem;
    right: 0.4rem;
    font-size: 0.3rem;
    background: #fff;
    padding: 0.1rem;
    border-radius: 6px;
    border: solid 2px #eee;
  }
}
.top {
  .van-nav-bar {
    position: relative;
    background-color: #e73a68;
    &::after {
      border: none;
    }
  }
  em {
    position: absolute;
    top: .03rem;
    left: .75rem;
    display: inline-block;
    width: .3rem;
    height: .3rem;
    color: orange;
    // background: ;
    z-index: 10;
  }
  .van-nav-bar__title {
    width:70%;
    max-width:70%;
    border: none;
    .van-button {
      width: 100%;
      height: .38rem;
      line-height: .38rem;
      color:#a3a3a3;
      i {
        top: .1rem;
        color: #ccc;
      }
    }
  }
  .van-nav-bar__right {
    span {
      color: #fff;
    }
    i {
      color: #fff;
    }
  }
  .van-nav-bar__left {
    i {
      color: #fff;
    }
  }
}
</style>
